
<template>
  <div class="pms-table-search">
    <el-form v-if="!detail" ref="form" :model="form" label-width="130px" size="mini" :inline="true" style="margin-bottom: 10px;">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="项目编码" style="width: 100%">
            <el-input v-model="form.prjCode" class="pms-zr-input" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物料编码" style="width: 100%">
            <el-input v-model="form.serviceCode" class="pms-zr-input" />
          </el-form-item>
        </el-col>
        <el-col :span="12" style="text-align: right;padding-top: 5px">
          <el-button size="mini" class="pms-zr-button-primary" @click="getTable">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :span-method="objectSpanMethod"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="50" fixed />
      <el-table-column
        v-for="item in column"
        :key="item.value"
        :prop="item.value"
        :label="item.label"
        align="center"
        :width="item.width"
      >
        <template slot-scope="scope">
          <span class="header-tooltip" style="width: 100%;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;display: block;" :title="scope.row[item.value]">{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { queryProductInfoListByParamApi, queryServInfoListByParamApi } from '@/api/acceptance'

export default {
  name: 'MaterialTabs',
  props: ['prjId', 'detail'],
  data() {
    return {
      tableData: [],
      column: [
        {
          label: '服务编码',
          value: 'serviceCode'
        },
        {
          label: '服务名称',
          value: 'serviceName'
        },
        {
          label: '单位',
          value: 'unit'
        },
        {
          label: '设计数量',
          value: 'amount'
        },
        {
          label: '采购订单编号',
          value: 'orderNo'
        },
        {
          label: '供应商名称',
          value: 'supplier'
        },
        {
          label: '合同编码',
          value: 'contractCode'
        },
        {
          label: '商合预占数',
          value: 'shNum'
        },
        {
          label: '单价(不含税)',
          value: 'price'
        },
        {
          label: '商合预占金额',
          value: 'shMoney'
        },
        {
          label: '当前绑定数量',
          value: 'boundNum'
        },
        {
          label: '当前绑定金额',
          value: 'boundMoney'
        }
      ],
      form: {
        'serviceCode': '',
        'prjCode': '',
        'subPrjList': this.prjId.split(',')
      },
      mergeArr: [],
        prjCodeMergeArr: []
    }
  },
  created() {
    if (!this.detail) {
      this.column = ([{
        label: '子项目编码',
        value: 'prjCode',
        width: '180'
      }, ...this.column])
    }
    this.getTable()
  },
  methods: {
      getSpanArr(data, key) {
          let count = 0 // 需要合并行的起始位置
          const arr = []
          data.forEach((item, index) => {
              if (index === 0) {
                  arr.push(1)
              } else {
                  if (item[key] === data[index - 1][key]) {
                      arr[count] += 1
                      arr.push(0)
                  } else {
                      count = index
                      arr.push(1)
                  }
              }
          })
          return arr
      },
      getSpanArrMerge(data) {
          const arr = []
          let count = 0 // 需要合并行的起始位置
          data.forEach((item, index) => {
              if (index === 0) {
                  arr.push(1)
              } else {
                  if (item['prjCode'] === data[index - 1]['prjCode'] && item['serviceCode'] === data[index - 1]['serviceCode']) {
                      arr[count] += 1
                      arr.push(0)
                  } else {
                      count = index
                      arr.push(1)
                  }
              }
          })
          return arr
      },
    getRowArr(arr, rowIndex) {
      if (arr[rowIndex]) {
        return [arr[rowIndex], 1]
      } else {
        return [0, 0]
      }
    },
    async getTable() {
     const result = await queryServInfoListByParamApi(this.form)
      this.tableData = result.data
      if (!this.detail) {
        this.prjCodeMergeArr = this.getSpanArr(result.data, 'prjCode')
          this.mergeArr = this.getSpanArrMerge(result.data)
      } else {
          this.mergeArr = this.getSpanArr(result.data, 'serviceCode')
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (!this.detail) {
        if ([1].includes(columnIndex) && this.prjCodeMergeArr.length > 0) {
          return this.getRowArr(this.prjCodeMergeArr, rowIndex)
        }
        if ([2, 3, 4, 5].includes(columnIndex) && this.mergeArr.length > 0) {
          return this.getRowArr(this.mergeArr, rowIndex)
        }
      } else {
        if ([1, 2, 3, 4].includes(columnIndex) && this.mergeArr.length > 0) {
          return this.getRowArr(this.mergeArr, rowIndex)
        }
      }
    }
  }
}
</script>
<style scoped lang='scss'>

</style>
